<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="./pop.css" rel="stylesheet" type="text/css">

<script src="../../js/bestime@beta.min.js"></script>
<script src="../tween/tween.js"></script>
<script src="./pop.js"></script>
<style>

</style>

</head>

<body>
  <style>
  .father{padding:20px;box-shadow:0 0 10px rgba(0,0,0,0.5)}
  .child{background:#000;color:#fff;display:none;}
  </style>
  <div id="fa-box" class="father" style="width:500px;height:300px;position:relative;">
    <button  onclick="showOne(this)">全屏显示</button>
    <button  onclick="showOne(this, true)">限制父容器显示</button>
    <button  onclick="showDialogFull(this)">全屏对话框</button>
    <button  onclick="showDialogQx(this)">限制范围对话框</button>
    <div class="child">你好</div>
  </div>

  <script>
    ns.loading = ns.createLoading()
    
    function showDialogFull () {
      ns.dialog({
        title: '这里可以改变标题',
        msg: '<div>这是全屏的弹框，父级为body</div>\
          <div>同一父级下最多只能有一个遮罩层</div>\
          <div style="color:red;">点击遮罩可关闭最顶层弹窗</div>'
        ,
        mask: true,
        maskClick: false,
        confirmText: '这里可以修改按钮文字',
        cancelText: '不填则无取消按钮',
        startShow: function (next) {
          ns.loading.show('显示前操作')
          setTimeout(function () {
            ns.loading.close()
            next()
          }, 1000)
        },
        startClose: function (step, next) {          
          ns.loading.show('关闭弹窗前判断操作')
          setTimeout(function () {
            ns.loading.close()
            next()
          }, 3000)
        },
        onClosed: function (step) {
          console.log('关闭步骤：', step)
        },
        autoClose: 1000 * 5 + 300
      })
    }

    function showDialogQx () {
      ns.dialog({
        msg: '这个是被限制了范围的',
        oFather: ns.id('fa-box'),
        mask: true,
      })
    }
    
    function showOne (el, flag) {
      //return console.log(el)
      ns.ShowDom({
        // 需要显示的容器
        el: el.parentNode.getElementsByClassName('child')[0],
        // 父容器，不填则为body
        oFather: flag ? el.parentNode : null,
        // 与父容器的间距
        space: 5,
        // 遮罩
        mask: true,
        // 过渡时间
        transitionTime: 300,
        // 显示开始回调
        startShow: function (next) {
          next()
          console.log('开始显示')
        },
        // 显示完毕回调
        onShowed: function () {
          console.log('显示完毕')
        },
        // 关闭完毕回调
        onClosed: function () {
          console.log('关闭')
        }
      })
    }



    ns.loading.show()
    setTimeout(function () {
      ns.loading.show()
    }, 200)
    setTimeout(function() {
      ns.loading.show()
    }, 400)
    setTimeout(function () {
      ns.loading.close()
    }, 600)

    setTimeout(function () {
      console.log(800)
      ns.loading.show()
    }, 800)

    setTimeout(function () {
      ns.loading.close()
    }, 1200)
    
  </script>
</body>
</html>
